<template>
  <el-row>
    <el-col :span="12">
      <iframe
        width="420"
        scrolling="no"
        height="50"
        frameborder="0"
        allowtransparency="true"
        src="//i.tianqi.com/index.php?c=code&id=12&color=%23FFFFFF&bgc=%23&bdc=%23&icon=1&num=3&site=12"
      ></iframe>
    </el-col>
    <el-col :span="4">&nbsp;</el-col>
    <el-col :span="2">
      <div>
        <i class="el-icon-edit"></i>
        <span>中文简体</span>
      </div>
    </el-col>
    <el-col :span="2">
      <i class="el-icon-notebook-2"></i>
      <span>通讯录</span>
    </el-col>
    <el-col :span="2">
      <div>{{userName}}</div>
    </el-col>
    <el-col :span="2">
      <i class="el-icon-setting"></i>
      <span @click="exit">退出</span>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "vHeader",
  computed: {
    userName() {
      return this.$store.state.userName;
    }
  },
  methods: {
    exit() {
      this.$http({
        method: "post",
        url: "/logout",
      })
        .then(res => {
          if(res.data.code === 200) {
            this.$router.push({ name: "login" }); // 跳转到登陆页面
            localStorage.removeItem("token"); // 清除token
            localStorage.removeItem("userName"); // 清除userName
            this.$message({
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.$message({
            message: err,
            type: "warning"
          });
        })
    }
  }
};
</script>

<style lang='scss' scoped>
/deep/ .el-col-12 {
  height: 50px;
  overflow: hidden;
}
/deep/ .el-col-2 {
  cursor: pointer;
  color: #fff;
  &:hover {
    background-color: #14988b;
  }
  &,
  span {
    height: 50px;
    overflow: hidden;
  }
}
</style>
